<template>
  <view class="pending-approval-page">
    <!-- 顶部导航 -->
    <view class="nav-header">
      <view class="nav-left" @click="goBack">
        <u-icon name="arrow-left" color="#ffffff" size="24"></u-icon>
      </view>
      <view class="nav-center">
        <text class="nav-title">待我审批</text>
      </view>
      <view class="nav-right"></view>
    </view>

    <!-- 列表区域 -->
    <view class="list-card">
      <view v-if="loading" class="loading-box">
        <u-loading-icon size="28" text="加载中..." />
      </view>

      <view v-else>
        <view v-if="list.length" class="approval-list">
          <view v-for="item in list" :key="item.id" class="approval-item">
            <view class="item-header">
              <view class="title-block">
                <text class="title">{{ item.reason || '请假申请' }}</text>
                <text class="subtitle" v-if="item.location">地点：{{ item.location }}</text>
              </view>
              <u-tag
                :text="getSourceLabel((item as any).isInternal)"
                :type="(item as any).isInternal === 0 ? 'warning' : 'primary'"
                size="mini"
                plain
              />
            </view>

            <view class="item-body">
              <view class="info-row">
                <text class="info-label">申请人</text>
                <text class="info-value">{{ item.applicantName || '-' }}</text>
              </view>
              <view class="info-row">
                <text class="info-label">{{ getDepartmentLabel((item as any).isInternal) }}</text>
                <text class="info-value">{{ item.departmentName || item.companyName || '-' }}</text>
              </view>
              <view class="info-row">
                <text class="info-label">时段</text>
                <text class="info-value">
                  {{ formatDateRange(item.startTime, item.endTime) }}
                </text>
              </view>
              <!-- <view class="info-row">
                <text class="info-label">天数</text>
                <text class="info-value">{{ item.totalDays ?? '-' }}</text>
              </view> -->
              <view class="info-row">
                <text class="info-label">提交时间</text>
                <text class="info-value">{{ formatDate(item.submitTime) || '-' }}</text>
              </view>
            </view>

            <view class="item-footer">
              <view class="actions">
                <u-button size="mini" type="primary" plain @click.stop="handleView(item)">
                  查看
                </u-button>
                <u-button size="mini" type="success" @click.stop="handleApprove(item)">
                  审批
                </u-button>
              </view>
            </view>
          </view>
        </view>
        <u-empty v-else mode="list" text="暂无待审批申请" />
      </view>

      <view v-if="pagination.total > pagination.size" class="pagination-wrapper">
        <u-pagination
          v-model="pagination.current"
          :total="pagination.total"
          :page-size="pagination.size"
          @change="handlePageChange"
        />
      </view>
    </view>
  </view>

  <!-- 审批弹窗 -->
  <u-popup
    v-model:show="approverPopupVisible"
    mode="bottom"
    :round="20"
    :close-on-click-overlay="false"
  >
    <view class="approver-popup">
      <view class="popup-header">
        <text class="popup-title">审批处理</text>
        <u-icon name="close" size="20" @click="handleApproverCancel" />
      </view>

      <view class="popup-body">
        <!-- 审批操作选择 -->
        <view class="form-section">
          <view class="section-title">审批操作</view>
          <u-radio-group v-model="approvalForm.action" @change="handleActionChange">
            <u-radio
              v-for="item in approvalActions"
              :key="item.value"
              :name="item.value"
              :label="item.label"
            />
          </u-radio-group>
        </view>

        <!-- 退回步骤选择 -->
        <!-- 调试信息 -->
        <!-- action: {{ approvalForm.action }}, steps length: {{ returnableSteps.length }} -->
        <view
          v-if="approvalForm.action === 'reject' && returnableSteps.length > 0"
          class="form-section"
        >
          <view class="section-title">退回步骤 *</view>
          <picker :range="returnableSteps" range-key="stepName" @change="handleReturnStepChange">
            <view class="picker-input">
              <text v-if="approvalForm.returnToStepName">{{ approvalForm.returnToStepName }}</text>
              <text v-else class="placeholder">请选择退回步骤</text>
            </view>
          </picker>
        </view>

        <!-- 如果没有可退回步骤，显示提示 -->
        <view
          v-if="approvalForm.action === 'reject' && returnableSteps.length === 0"
          class="form-section"
        >
          <view class="section-title">退回步骤</view>
          <view class="no-steps-tip">无可退回步骤，将直接退回到申请人</view>
        </view>

        <!-- 审批人选择（同意时） -->
        <view
          v-if="approvalForm.action === 'approve' && approverPreview?.currentStepNeedsSelection"
          class="form-section"
        >
          <view class="section-title">选择 {{ approverPreview?.nextStepName || '审批人' }}</view>

          <!-- 单人自动选择 -->
          <view v-if="approverOptions.length === 1" class="single-approver">
            <view class="approver-card">
              <text class="approver-name">{{ approverOptions[0].userName }}</text>
              <text class="approver-info">
                {{ approverOptions[0].jobTitle || '未分配职务' }}
                <text v-if="approverOptions[0].deptName"> · {{ approverOptions[0].deptName }}</text>
              </text>
              <u-tag text="已自动选择" type="success" size="mini" />
            </view>
          </view>

          <!-- 多人手动选择 -->
          <view v-else-if="approverOptions.length > 1" class="multi-approver">
            <view class="search-box">
              <u-search
                v-model="approverSearchKeyword"
                placeholder="搜索姓名、部门或职务"
                :show-action="false"
              />
            </view>

            <view class="approver-lists">
              <view class="approver-list">
                <view class="list-header">可选审批人员 ({{ filteredApproverOptions.length }})</view>
                <scroll-view scroll-y class="list-content">
                  <view
                    v-for="option in filteredApproverOptions"
                    :key="option.userId"
                    class="approver-option"
                    :class="{ disabled: selectedApprovers.includes(option.userId) }"
                    @click="selectApprover(option.userId)"
                  >
                    <view class="option-info">
                      <text class="option-name">{{ option.userName }}</text>
                      <text class="option-detail">
                        {{ option.jobTitle || '未分配职务' }}
                        <text v-if="option.deptName"> · {{ option.deptName }}</text>
                      </text>
                    </view>
                    <u-icon
                      v-if="selectedApprovers.includes(option.userId)"
                      name="checkbox-mark"
                      color="#5f87ff"
                      size="20"
                    />
                  </view>
                </scroll-view>
              </view>

              <view class="approver-list">
                <view class="list-header">已选审批人员 ({{ selectedApprovers.length }})</view>
                <scroll-view scroll-y class="list-content">
                  <view
                    v-for="(approverId, index) in selectedApprovers"
                    :key="approverId"
                    class="approver-option selected"
                  >
                    <view class="order-number">{{ index + 1 }}</view>
                    <view class="option-info">
                      <text class="option-name">{{ getApproverById(approverId)?.userName }}</text>
                      <text class="option-detail">
                        {{ getApproverById(approverId)?.jobTitle || '未分配职务' }}
                        <text v-if="getApproverById(approverId)?.deptName">
                          · {{ getApproverById(approverId)?.deptName }}
                        </text>
                      </text>
                    </view>
                    <view class="remove-icon" @click="removeApprover(approverId)">
                      <u-icon name="close-circle" color="#f56c6c" size="20" />
                    </view>
                  </view>
                  <view v-if="selectedApprovers.length === 0" class="empty-text">
                    暂无已选人员
                  </view>
                </scroll-view>
              </view>
            </view>
          </view>
        </view>

        <!-- 审批意见 -->
        <view class="form-section">
          <view class="section-title">审批意见 *</view>
          <u-textarea
            v-model="approvalForm.opinion"
            placeholder="请输入审批意见"
            :maxlength="500"
            count
          />
        </view>
      </view>

      <view class="popup-footer">
        <u-button type="info" plain @click="handleApproverCancel"> 取消 </u-button>
        <u-button
          type="primary"
          :loading="approverSubmitting"
          :disabled="!canSubmitApproval"
          @click="handleApproverConfirm"
        >
          确认提交
        </u-button>
      </view>
    </view>
  </u-popup>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import {
  getPendingLeaveApprovals,
  previewLeaveApplicationNextStep,
  submitLeaveApplication,
  rejectLeaveApplication,
  getReturnableSteps,
  type LeaveApplicationDetail,
  type LeaveApplicationNextStepPreview,
  type LeaveApplicationApproverOption,
  type LeaveApplicationSubmitData,
  type LeaveApplicationRejectData,
  type ReturnableStep,
} from '@/Api/leave'
import { useMemberStore } from '@/stores/modules/member'

const memberStore = useMemberStore()

// 列表数据
const list = ref<LeaveApplicationDetail[]>([])
const loading = ref(false)
const pagination = reactive({
  current: 1,
  size: 10,
  total: 0,
})

// 审批弹窗
const approverPopupVisible = ref(false)
const approverSubmitting = ref(false)
const pendingApproveRow = ref<LeaveApplicationDetail | null>(null)
const approverPreview = ref<LeaveApplicationNextStepPreview | null>(null)
const approverOptions = ref<LeaveApplicationApproverOption[]>([])
const selectedApprovers = ref<number[]>([])
const approverSearchKeyword = ref('')
const returnableSteps = ref<ReturnableStep[]>([])

// 审批表单
const approvalForm = reactive({
  action: 'approve' as 'approve' | 'reject',
  opinion: '同意。',
  returnToStepName: '',
})

const approvalActions = [
  { label: '同意', value: 'approve' },
  { label: '拒绝', value: 'reject' },
]

// 计算属性
const filteredApproverOptions = computed(() => {
  if (!approverSearchKeyword.value) return approverOptions.value
  const keyword = approverSearchKeyword.value.toLowerCase()
  return approverOptions.value.filter((option) => {
    return (
      option.userName.toLowerCase().includes(keyword) ||
      option.jobTitle?.toLowerCase().includes(keyword) ||
      option.deptName?.toLowerCase().includes(keyword)
    )
  })
})

const canSubmitApproval = computed(() => {
  if (!approvalForm.opinion.trim()) return false
  if (approvalForm.action === 'reject') {
    return returnableSteps.value.length === 0 || !!approvalForm.returnToStepName
  }
  if (approvalForm.action === 'approve' && approverPreview.value?.currentStepNeedsSelection) {
    return selectedApprovers.value.length > 0
  }
  return true
})

// 生命周期
onMounted(() => {
  // 监听从详情页返回的审批事件
  uni.$on('leave:approve', handleApproveFromDetail)
})

onShow(() => {
  // 页面显示时刷新列表（包括首次进入和从其他页面返回）
  loadList()
})

// 页面卸载时移除事件监听
onUnmounted(() => {
  uni.$off('leave:approve', handleApproveFromDetail)
})

// 从详情页返回后触发审批
const handleApproveFromDetail = (leaveId: number) => {
  console.log('[handleApproveFromDetail] 收到审批事件, leaveId:', leaveId)
  // 在列表中找到对应的记录
  const row = list.value.find((item) => item.id === leaveId)
  if (row) {
    console.log('[handleApproveFromDetail] 找到记录，触发审批')
    handleApprove(row)
  } else {
    console.warn('[handleApproveFromDetail] 未找到对应记录')
    uni.showToast({ title: '未找到对应的审批记录', icon: 'none' })
  }
}

// 返回上一页
const goBack = () => {
  const pages = getCurrentPages()
  if (pages.length <= 1) {
    uni.reLaunch({
      url: '/pages/index/index',
    })
  } else {
    uni.navigateBack({
      delta: 1,
    })
  }
}

// 方法
const loadList = async () => {
  try {
    loading.value = true
    const userInfo = memberStore.profile
    if (!userInfo?.id) {
      uni.showToast({ title: '用户信息不完整', icon: 'none' })
      return
    }

    const res: any = await getPendingLeaveApprovals(
      userInfo.id,
      pagination.current,
      pagination.size,
    )
    const body = res?.data || res
    if (body?.code && body.code !== 200) {
      throw new Error(body.message || '加载失败')
    }
    const data = body?.data || body
    list.value = data?.records || []
    pagination.total = data?.total || 0
  } catch (error: any) {
    console.error('加载待审批列表失败:', error)
    uni.showToast({ title: error?.message || '加载失败', icon: 'none' })
  } finally {
    loading.value = false
  }
}

const handlePageChange = (page: number) => {
  pagination.current = page
  loadList()
}

const handleView = (row: LeaveApplicationDetail) => {
  // 跳转到详情页面（查看模式），并传递 showApproval 参数
  uni.navigateTo({
    url: `/pages/leave/forms/index?id=${row.id}&templateName=${encodeURIComponent(
      row.flowTemplateName || '请假申请',
    )}&templateCode=${inferTemplateCode(row.flowTemplateName)}&mode=view&showApproval=true`,
  })
}

const inferTemplateCode = (name?: string, fallback?: string) => {
  if (fallback) return fallback
  if (!name) return 'leave_report'
  // 内部人员
  if (name.includes('内部')) return 'outing_report'
  // 外部人员
  return 'leave_report'
}

const handleApprove = async (row: LeaveApplicationDetail) => {
  try {
    const userInfo = memberStore.profile
    if (!userInfo?.id) {
      uni.showToast({ title: '用户信息不完整', icon: 'none' })
      return
    }

    uni.showLoading({ title: '加载中...' })

    // 预检下一步骤
    const previewResponse: any = await previewLeaveApplicationNextStep({
      leaveId: row.id,
      operatorId: userInfo.id,
      currentStepOrder: row.currentStepOrder ?? null,
      currentStepName: row.currentStep ?? null,
      nextStepName: row.nextStepName ?? null,
    })

    uni.hideLoading()

    const previewBody = previewResponse?.data || previewResponse
    if (previewBody?.code && previewBody.code !== 200) {
      throw new Error(previewBody.message || '预检失败')
    }
    const previewData = (previewBody?.data || previewBody) as LeaveApplicationNextStepPreview

    // 根据当前步骤是否需要选人来判断是否显示选人界面
    if (previewData.currentStepNeedsSelection) {
      if (!previewData.approverOptions || previewData.approverOptions.length === 0) {
        uni.showToast({ title: '未找到可选审批人，请联系管理员', icon: 'none', duration: 3000 })
        return
      }
      approverOptions.value = previewData.approverOptions
      // 如果只有一个人，自动选择
      if (previewData.approverOptions.length === 1) {
        selectedApprovers.value = [previewData.approverOptions[0].userId]
      } else {
        selectedApprovers.value = []
      }
    } else {
      approverOptions.value = []
      selectedApprovers.value = []
    }

    approverPreview.value = previewData
    pendingApproveRow.value = row
    // 重置审批表单
    approvalForm.action = 'approve'
    approvalForm.opinion = '同意。'
    approvalForm.returnToStepName = ''
    returnableSteps.value = []
    approverSearchKeyword.value = ''
    approverPopupVisible.value = true
  } catch (error: any) {
    uni.hideLoading()
    console.error('审批失败:', error)
    uni.showToast({ title: error?.message || '审批失败', icon: 'none' })
  }
}

const handleActionChange = async (value: string) => {
  if (value === 'reject') {
    // 清空已选审批人
    selectedApprovers.value = []
    // 清空审批意见，让用户输入拒绝理由
    approvalForm.opinion = ''

    // 加载可退回的步骤
    if (pendingApproveRow.value?.id) {
      try {
        uni.showLoading({ title: '加载中...' })
        const res: any = await getReturnableSteps(
          pendingApproveRow.value.id,
          pendingApproveRow.value.currentStepOrder ?? 0,
        )
        uni.hideLoading()
        const body = res?.data.data || res
        console.log('[handleActionChange] API 响应 body:', body)
        if (body?.code === 200 && body?.data) {
          returnableSteps.value = body.data as ReturnableStep[]
          console.log('[handleActionChange] 可退回步骤列表:', returnableSteps.value)
          // 如果只有一个可退回步骤，自动选择
          if (returnableSteps.value.length === 1) {
            approvalForm.returnToStepName = returnableSteps.value[0].stepName
            console.log('[handleActionChange] 自动选择唯一步骤:', approvalForm.returnToStepName)
          } else {
            approvalForm.returnToStepName = ''
            console.log('[handleActionChange] 有多个步骤，等待用户选择')
          }
        } else {
          console.log('[handleActionChange] API 返回异常，清空步骤列表')
          returnableSteps.value = []
          approvalForm.returnToStepName = ''
        }
      } catch (error: any) {
        uni.hideLoading()
        console.error('加载可退回步骤失败:', error)
        returnableSteps.value = []
        approvalForm.returnToStepName = ''
      }
    }
  } else {
    // 选择同意时，清空退回步骤
    returnableSteps.value = []
    approvalForm.returnToStepName = ''
    // 设置默认审批意见
    if (!approvalForm.opinion.trim()) {
      approvalForm.opinion = '同意。'
    }
  }
}

const handleReturnStepChange = (e: any) => {
  const index = e.detail.value
  approvalForm.returnToStepName = returnableSteps.value[index]?.stepName || ''
}

const selectApprover = (userId: number) => {
  if (selectedApprovers.value.includes(userId)) {
    // 如果已选择，则取消选择
    selectedApprovers.value = selectedApprovers.value.filter((id) => id !== userId)
  } else {
    // 添加到已选择列表
    selectedApprovers.value.push(userId)
  }
}

const removeApprover = (userId: number) => {
  console.log('[removeApprover] 移除审批人:', userId)
  console.log('[removeApprover] 移除前:', selectedApprovers.value)
  selectedApprovers.value = selectedApprovers.value.filter((id) => id !== userId)
  console.log('[removeApprover] 移除后:', selectedApprovers.value)
}

const getApproverById = (userId: number) => {
  return approverOptions.value.find((option) => option.userId === userId)
}

const handleApproverConfirm = async () => {
  if (!canSubmitApproval.value) {
    uni.showToast({ title: '请完善审批信息', icon: 'none' })
    return
  }

  if (!pendingApproveRow.value) {
    uni.showToast({ title: '审批数据异常', icon: 'none' })
    return
  }

  const userInfo = memberStore.profile
  if (!userInfo?.id) {
    uni.showToast({ title: '用户信息不完整', icon: 'none' })
    return
  }

  try {
    approverSubmitting.value = true

    if (approvalForm.action === 'approve') {
      // 同意操作
      const submitData: LeaveApplicationSubmitData = {
        id: pendingApproveRow.value.id,
        applicantId: pendingApproveRow.value.applicantId,
        action: 'approve',
        opinion: approvalForm.opinion,
      }

      // 如果需要选择审批人
      if (approverPreview.value?.currentStepNeedsSelection && selectedApprovers.value.length > 0) {
        submitData.selectedApprovers = selectedApprovers.value.map((userId) => {
          const approver = getApproverById(userId)
          return {
            approverId: userId,
            approverName: approver?.userName || '',
            deptName: approver?.deptName,
          }
        })
      }

      const res: any = await submitLeaveApplication(submitData)
      const body = res?.data || res
      if (body?.code && body.code !== 200) {
        throw new Error(body.message || '提交失败')
      }

      uni.showToast({ title: '审批成功', icon: 'success' })
    } else {
      // 拒绝操作
      // 验证退回步骤（如果有可退回步骤）
      if (returnableSteps.value.length > 0 && !approvalForm.returnToStepName) {
        uni.showToast({ title: '请选择退回步骤', icon: 'none' })
        return
      }

      const rejectData: LeaveApplicationRejectData = {
        leaveId: pendingApproveRow.value.id,
        approverId: userInfo.id,
        approverName: userInfo.nickname || userInfo.name || '',
        opinion: approvalForm.opinion,
        returnToStepName: approvalForm.returnToStepName || undefined,
      }

      const res: any = await rejectLeaveApplication(rejectData)
      const body = res?.data || res
      if (body?.code && body.code !== 200) {
        throw new Error(body.message || '退回失败')
      }

      uni.showToast({ title: '已退回', icon: 'success' })
    }

    approverPopupVisible.value = false
    resetApproverDialog()
    // 刷新列表
    loadList()
  } catch (error: any) {
    console.error('审批操作失败:', error)
    uni.showToast({ title: error?.message || '操作失败', icon: 'none' })
  } finally {
    approverSubmitting.value = false
  }
}

const handleApproverCancel = () => {
  approverPopupVisible.value = false
  resetApproverDialog()
}

const resetApproverDialog = () => {
  pendingApproveRow.value = null
  approverPreview.value = null
  approverOptions.value = []
  selectedApprovers.value = []
  approverSearchKeyword.value = ''
  returnableSteps.value = []
  approvalForm.action = 'approve'
  approvalForm.opinion = '同意。'
  approvalForm.returnToStepName = ''
}

// 工具函数
const getInternalTypeLabel = (row: LeaveApplicationDetail) => {
  return row.leaveTypeName === '外出报备' ? '外出报备' : '请假申请'
}

const getInternalTypeTag = (row: LeaveApplicationDetail) => {
  return row.leaveTypeName === '外出报备' ? 'warning' : 'primary'
}

const formatDateTime = (value?: string) => {
  if (!value) return '-'
  return value.replace('T', ' ').substring(0, 16)
}

const formatDate = (value?: string) => {
  if (!value) return '-'
  return value.substring(0, 10)
}

const formatDateRange = (start?: string, end?: string) => {
  if (!start || !end) return '-'
  return `${formatDateTime(start)} 至 ${formatDateTime(end)}`
}

// 获取来源标签（根据 isInternal 字段）
// isInternal: 0-内部单位（内部部门），1-外部单位
const getSourceLabel = (isInternal?: number) => {
  // 如果字段未定义，默认为内部部门
  if (isInternal === undefined || isInternal === null) {
    return '内部部门'
  }
  // isInternal = 0 表示内部单位（内部部门）
  // isInternal = 1 表示外部单位
  return isInternal === 0 ? '内部部门' : '外部单位'
}

// 获取部门/单位标签（根据 isInternal 字段）
// isInternal: 0-内部单位（显示"部门"），1-外部单位（显示"单位"）
const getDepartmentLabel = (isInternal?: number) => {
  // 如果字段未定义，默认为"部门"
  if (isInternal === undefined || isInternal === null) {
    return '部门'
  }
  // isInternal = 0 表示内部单位，显示"部门"
  // isInternal = 1 表示外部单位，显示"单位"
  return isInternal === 0 ? '部门' : '单位'
}
</script>

<style scoped lang="scss">
.pending-approval-page {
  height: 100vh;
  background: #f5f6fa;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  /* 顶部导航 */
  .nav-header {
    background: #818cf8;
    padding: 46px 32rpx 20rpx 32rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white;
    z-index: 99;

    .nav-left {
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .nav-center {
      flex: 1;
      text-align: center;

      .nav-title {
        font-size: 36rpx;
        font-weight: bold;
      }
    }

    .nav-right {
      min-width: 22px;
    }
  }

  .list-card {
    background: #f5f6fa;
    border-radius: 0;
    padding: 24rpx;
    box-shadow: none;
    flex: 1;
    overflow: auto;
  }

  .loading-box {
    padding: 80rpx 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .approval-list {
    display: flex;
    flex-direction: column;

    .approval-item {
      border: none;
      border-radius: 24rpx;
      padding: 32rpx;
      background: #ffffff;
      box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
      margin-bottom: 24rpx;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;

      &:active {
        transform: translateY(-2rpx);
        box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.12);
      }

      .item-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 6rpx;
        margin-bottom: 24rpx;
        padding-bottom: 20rpx;
        border-bottom: 1rpx solid #f0f2f5;

        .title-block {
          flex: 1;
          min-width: 0;
          display: flex;
          flex-direction: column;

          > *:not(:last-child) {
            margin-bottom: 6rpx;
          }

          .title {
            font-size: 34rpx;
            color: #1f2a56;
            font-weight: 700;
            line-height: 1.4;
            word-break: break-all;
          }

          .subtitle {
            font-size: 24rpx;
            color: #909399;
            line-height: 1.4;
          }
        }
      }

      .item-body {
        display: flex;
        flex-direction: column;
        margin-bottom: 24rpx;

        > *:not(:last-child) {
          margin-bottom: 16rpx;
        }

        .info-row {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 28rpx;
          line-height: 1.6;

          .info-label {
            color: #606266;
            font-weight: 500;
            min-width: 140rpx;
          }

          .info-value {
            color: #303133;
            font-weight: 500;
            text-align: right;
            flex: 1;
            word-break: break-all;
          }
        }
      }

      .item-footer {
        padding-top: 20rpx;
        border-top: 1rpx solid #f0f2f5;

        .actions {
          display: flex;
          justify-content: space-around;

          > *:not(:last-child) {
            margin-right: 16rpx;
          }

          :deep(.u-button) {
            min-width: 120rpx;
            height: 64rpx;
            font-size: 26rpx;
            border-radius: 8rpx;

            &:after {
              display: none;
            }
          }
        }
      }
    }
  }

  .pagination-wrapper {
    margin-top: 16rpx;
    display: flex;
    justify-content: center;
  }
}

.approver-popup {
  background: #ffffff;
  border-radius: 32rpx 32rpx 0 0;
  max-height: 80vh;
  display: flex;
  flex-direction: column;

  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32rpx;
    border-bottom: 1rpx solid #edf0f5;

    .popup-title {
      font-size: 36rpx;
      font-weight: 700;
      color: #1f2b5b;
    }
  }

  .popup-body {
    flex: 1;
    overflow-y: auto;
    padding: 32rpx;

    .form-section {
      margin-bottom: 32rpx;

      .section-title {
        font-size: 30rpx;
        font-weight: 600;
        color: #1f2b5b;
        margin-bottom: 20rpx;
      }

      .picker-input {
        padding: 24rpx;
        background: #f5f7ff;
        border-radius: 16rpx;
        border: 1rpx solid #dce2ff;

        .placeholder {
          color: #a0a4ab;
        }
      }

      .no-steps-tip {
        padding: 24rpx;
        background: #fff7e6;
        border-radius: 16rpx;
        border: 1rpx solid #ffd591;
        color: #fa8c16;
        font-size: 26rpx;
        text-align: center;
      }
    }

    .single-approver {
      .approver-card {
        padding: 24rpx;
        background: linear-gradient(135deg, #f0f4ff 0%, #e8f0ff 100%);
        border-radius: 16rpx;
        border: 2rpx solid #5f87ff;
        display: flex;
        flex-direction: column;

        > *:not(:last-child) {
          margin-bottom: 12rpx;
        }

        .approver-name {
          font-size: 32rpx;
          font-weight: 600;
          color: #1f2b5b;
        }

        .approver-info {
          font-size: 26rpx;
          color: #5a6380;
        }
      }
    }

    .multi-approver {
      .search-box {
        margin-bottom: 20rpx;
      }

      .approver-lists {
        display: flex;

        > *:not(:last-child) {
          margin-right: 20rpx;
        }

        .approver-list {
          flex: 1;

          .list-header {
            font-size: 28rpx;
            font-weight: 600;
            color: #1f2b5b;
            margin-bottom: 16rpx;
          }

          .list-content {
            height: 400rpx;
            background: #f5f7ff;
            border-radius: 16rpx;
            padding: 16rpx;

            .approver-option {
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 20rpx;
              background: #ffffff;
              border-radius: 12rpx;
              margin-bottom: 12rpx;
              border: 1rpx solid #edf0f5;

              &.disabled {
                opacity: 0.5;
              }

              &.selected {
                border-color: #5f87ff;
                background: linear-gradient(135deg, #f0f4ff 0%, #e8f0ff 100%);
              }

              .order-number {
                width: 48rpx;
                height: 48rpx;
                background: #5f87ff;
                color: #ffffff;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 24rpx;
                font-weight: 600;
                margin-right: 16rpx;
              }

              .option-info {
                flex: 1;
                display: flex;
                flex-direction: column;

                > *:not(:last-child) {
                  margin-bottom: 8rpx;
                }

                .option-name {
                  font-size: 28rpx;
                  font-weight: 600;
                  color: #1f2b5b;
                }

                .option-detail {
                  font-size: 24rpx;
                  color: #8b90a5;
                }
              }

              .remove-icon {
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 8rpx;
                cursor: pointer;
                transition: transform 0.2s;

                &:active {
                  transform: scale(0.9);
                }
              }
            }

            .empty-text {
              text-align: center;
              padding: 40rpx 0;
              color: #a0a4ab;
              font-size: 26rpx;
            }
          }
        }
      }
    }
  }

  .popup-footer {
    display: flex;
    padding: 32rpx;
    border-top: 1rpx solid #edf0f5;
    background: #ffffff;

    > *:not(:last-child) {
      margin-right: 20rpx;
    }

    :deep(.u-button) {
      flex: 1;
      height: 88rpx;
      font-size: 30rpx;

      &:after {
        display: none;
      }
    }
  }
}
</style>
